<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	span {
		font-size: 12px; 
	}
</style>
</head>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/javascript/table/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/javascript/jQuery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/locale/bootstrap-table-zh-CN.js"></script>
<body>
	<h3>类别修改</h3>
	<form id="myForm" action="CategoryServlet?op=doEditCategoryById" method="post">
		<table class="table">
			<tr>
					<input type="text" id="cateId" name="cateId" value="${cate.categoryId}" readonly hidden />
			</tr>
			<tr>
				<td style="width:200px;">类别名称</td>
				<td style="width:240px;">
					<input class="form-control" type="text" id="cateName" name="cateName" value="${cate.categoryName}" onblur="checkCateName(this,0)" />
				</td>
				<td>
					<span id="sCateName"></span>
				</td>
			</tr>
			<tr>
				<td>类别简介</td>
				<td>
					<input class="form-control" type="text" id="cateDesc" name="cateDesc" value="${cate.categoryDesc}" onblur="checkCateDesc(this,0)" />
				</td>
				<td>
					<span id="sCateDesc"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input class="btn btn-success" type="button" value="确定修改" onclick="checkDate()" /> 
					<input class="btn btn-info" type="reset" value="重置" />
				</td>
			</tr>
		</table>
	</form>
	
	
</body>

<script type="text/javascript">
	//获取到xmlHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	//简化数据 value 获取
	function $(id){
		return document.getElementById(id);
	}
	
	// 使用正则表达式 校验数据
	function regCheck(str,index){
		var arr = [
				/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,   // 只含有汉字、数字、字母、下划线不能以下划线开头和结尾
		];
		return arr[index].test(str);
	}
	
	// 正则表达式 校验 类别名称
	function checkCateName(obj,index){
		var cateId = $("cateId").value;
		var cateName = $("cateName").value;
		var s_cateName = $("sCateName");
		var f = regCheck(obj.value,index);
		if(f){
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var msg = xmlhttp.responseText;
					if (msg == "可用") {
						s_cateName.innerHTML = "<font color='green'> √ </font>";
					} else if (msg == "重名") {
						s_cateName.innerHTML = "<font color='red'> × 类别名称已存在.</font>";
					}
				}
			}
			xmlhttp.open("GET", "CategoryServlet?op=checkCategoryNameByEdit&id="+cateId+"&cateName="+cateName,true);
			xmlhttp.send();
		} else {
			s_cateName.innerHTML = "<font color='red'> × 类别名称格式不正确.</font>";
		}
		return f;
	}
	
	// 正则表达式 校验 类别简介
	function checkCateDesc(obj,index){
		var s_cateDesc = $("sCateDesc");
		var f = regCheck(obj.value,index);
		if(f){
			s_cateDesc.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_cateDesc.innerHTML = "<font color='red'> × 类别简介格式不正确.</font>";
		}
		return f;
	}
	
	// 校验提交数据
	function checkDate(){
		var cateName = $("cateName");
		var cateDesc = $("cateDesc");
		
		if(checkCateName(cateName,0) && checkCateDesc(cateDesc,0)){
			// alert("提交!");
			if(cateName.value == "${cate.categoryName}" && cateDesc.value == "${cate.categoryDesc}"){
				alert("当前数据未修改,请修改后提交.");
			} else {
			    myForm.submit();
				// alert("提交");
			}
		} else {
			alert("有数据未正确填写!");
		}
	}


</script>
</html>